<template>
  <div class="word-container"> 
    <div class="chart" id="chart_right1" ref="chart_right1"></div>
  </div>
</template>

<script>
import "echarts-wordcloud/dist/echarts-wordcloud"

export default {
  name: "wordCloud",
  data() {
    return {
      optionData: [],
    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    getEchart() {
      let myChart = this.$echarts.init(this.$refs.chart_right1);
      let option = {
        tooltip: {
          show: false
        },
        series: [{
          type: 'wordCloud',
          gridSize: 1,
          sizeRange: [12, 50],
          rotationRange: [-90, 90],
          rotationStep: 45,
          shape: 'diamond',
          width: '90%',
          textPadding: 0,
          autoSize: {
            enable: true,
            minSize: 6
          },
          textStyle: {
            normal: {
              textBorderColor: 'rgba(255,255,255,0.3)',
              textBorderWidth: 1,
              color: () => {
                return 'rgb(' + [
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160)
                ].join(',') + ')';
              }
            },
            emphasis: {
              fontSize: 15,
              shadowBlur: 10,
              shadowColor: 'rgba(255,255,255, .1)'
            }
          },
          data: this.optionData,
        }]
      }
      myChart.setOption(option);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.word-container {
  .chart {
    height: 3rem;
  }
}
</style>
